<template>

  <view class="home">
    <tab-bar :currentPage="0"></tab-bar>
    <view class="nav">
      <image class="nav_image" src="../../static/images/bj.jpg" mode=""></image>
      <view class="nav_left">
        <view class="image_left">
          <image class="image" :src="userInfo.userInfo.avatar ? userInfo.userInfo.avatar : ''" mode=""></image>
        </view>
        <view class="nav_right">
          <view class="user">{{ userInfo.userInfo.name ? userInfo.userInfo.name : '----' }}</view>
          <view class="user_item">工号：{{ userInfo.userInfo.userId ? userInfo.userInfo.userId : '----' }}</view>
          <view class="user_item">部门：{{ userInfo.detp ? userInfo.detp : '----' }}</view>
        </view>
      </view>
    </view>
    <!-- 通知 -->
    <view class="natice">
      <u-notice-bar :text="text1" color="#ffffff" bgColor="#0d6fb8"></u-notice-bar>
    </view>
    <view class="person">
      <view v-for="(item, index) in list" @click="clickAdd(index)" :key="index" :class="{ red: i === index }">
        <view class="personImages">
          <view>{{ item.name }}</view>
          <image @click="show = true" v-if="i == 1" :src="item.images" mode=""></image>
        </view>
      </view>
    </view>
    <!-- 搜索 -->
    <view class="search">
      <view class="search_left">
        <u-search placeholder="输入资产名称" v-model="form.search" bgColor="#fff" @blur="onchange" :showAction="false">
        </u-search>
      </view>
      <view class="search_right" @click="isPlay = true">
        <image src="../../static/images/sx.jpg" mode=""></image>
      </view>
    </view>

    <!-- 资产数量 -->
    <view class="num">
      <view :class="index != 7 ? 'num_btn' : 'num_btn1'" @click="assetDetail(index)"
        v-for="(item, index) in numTemplate" :key="index">
        <image :src="item.image" mode=""></image>
        <view class="title">{{ item.title }}</view>
        <view class="number">{{ item.num }}</view>
      </view>
    </view>
    <view class="progress">
      <!-- 进度 -->
      <u-cell-group
        :title="`盘点进度(总进度${GetProgressList.sum ? GetProgressList.sum : '0'}/${GetProgressList.over ? GetProgressList.over : '0'})`">
        <u-cell>
          <view slot="title">
            <u-line-progress :percentage="GetProgressList.over" activeColor="#1989fa"></u-line-progress>
          </view>
        </u-cell>

      </u-cell-group>
    </view>

    <u-picker @confirm="confirm" @cancel="show = false" :show="show" :columns="columns" keyName="label"></u-picker>

    <!-- 右边弹出 -->
    <u-popup mode="bottom" closeable :show="isPlay" @close="isPlay = false">
      <view class="foor">
        <search @change="change" @changeClose="changeClose"></search>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { getToken, addUserInfo } from "@/common/utils";
import search from "@/components/search/list.vue"
export default {
  components: {
    search,

  },
  data() {
    return {
      text1: [],
      list: [{
        name: '我的资产',
        id: -2
      }, {
        name: '部门资产',
        id: -1,
        images: require("../../static/images/icon_left.png")
      }],
      i: 0,
      numTemplate: [{
        image: require("../../static/images/t1.png"),
        title: '资产数量',
        num: '0',
      },
      {
        image: require("../../static/images/t2.png"),
        title: '资产金额(万元)',
        num: '0'
      },
      {
        image: require("../../static/images/t3.png"),
        title: '待盘点资产',
        num: '0'
      },
      {
        image: require("../../static/images/t4.png"),
        title: '待处理新增',
        num: '0'
      },
      {
        image: require("../../static/images/t4.png"),
        title: '待处理转移',
        num: '0'
      },
      {
        image: require("../../static/images/t4.png"),
        title: '待处理报废',
        num: '0'
      },

      {
        image: require("../../static/images/t4.png"),
        title: '鉴定记录',
        num: '0'
      },
      {
        image: '',
        title: '',
        num: ''
      },

      ],
      show: false,
      isPlay: false, //右侧弹出
      columns: [
      ],
      userInfo: {
      },
      form: {
        search: ''
      },
      scene: undefined,
      GetProgressList: {},//盘点记录
    }
  },

  mounted() {
    if (getToken()) {
      this.PhoneIndexInfo()
    }
    this.GetMyNewMsg()//消息
    this.GetCenterDept()//保管单位
    this.userInfo = uni.getStorageSync('userInfo')

    // 有没有权限
    if (this.scene) {
      this.SelectInventory(this.scene)
    }

  },
  onLoad(options) {
    if (options === 'undefined') {
      this.scene = ""
    } else {
      this.scene = options.scene

    }
  },
  methods: {
    assetDetail(index) {

      if (index == 0 || index == 1 || index == 2 || index == 3) {
        if (this.i == 0) {
          // 1.如果是从我的资产点进去  就仅查询我的资产 seachType=1
          uni.redirectTo({
            url: '/pages/assetlist/list'
          })
        } else {
          var seachType = 0
          var depository = ''
          if (this.list[this.i].id == -1) {
            depository = ''
          } else {
            depository = this.list[this.i].name
          }

          uni.redirectTo({
            url: '/pages/assetlist/list?seachType=' + seachType + "&depository=" + depository
          })
        }
      } else if (index == 4) {
        uni.redirectTo({
          url: '/pages/assetTransfer/list'
        })

      } else if (index == 5) {
        uni.redirectTo({
          url: '/pages/retirement/list'
        })
      } else {
        uni.navigateTo({
          url: '/pages/appraisal/list'
        })

      }


    },
    onchange(e) {
      this.form.search = e
      uni.redirectTo({
        url: '/pages/assetlist/list?search=' + this.form.search
      })
    },
    // 保管单位
    GetCenterDept() {
      this.$u.api.GetCenterDept().then((res) => {
        const data = res.data.map((x) => {
          return {
            id: x.objectID,
            label: x.name
          }
        })
        const arr = [{
          label: '部门资产',
          id: -1,
        }]
        this.columns = [arr.concat(data)]
      })
    },

    // 盘点记录
    GetProgress() {

      const data = {
        deptID: -1,
        seach: this.userInfo.userInfo.name
      }

      this.$u.api.GetProgress(data).then((res) => {
        this.GetProgressList = res.data[0]

      })
    },

    // 获取用户信息
    PhoneIndexInfo() {
      const data = {
        detpID: this.i == 0 ? -2 : -1
      }
      this.$u.api.PhoneIndexInfo(data).then((res) => {
        this.userInfo = res.data
        addUserInfo(this.userInfo)

        this.numTemplate[0].num = this.userInfo.noInventory //资产数量
        this.numTemplate[1].num = this.userInfo.assetsPrice.toFixed(2) //资产价格
        this.numTemplate[2].num = this.userInfo.assetsCount //盘点
        this.numTemplate[3].num = this.userInfo.add.length //新增
        this.numTemplate[4].num = this.userInfo.divert.length //转移
        this.numTemplate[5].num = this.userInfo.scrap.length //报废
        this.numTemplate[6].num = this.userInfo.appraisal.length //鉴定
        this.GetProgress()

      })
    },
    clickAdd(index) {
      this.i = index
      this.PhoneIndexInfo()
    },

    confirm(e) {

      this.show = false
      this.list[this.i].id = e.value[0].id
      this.list[this.i].name = e.value[0].label

    },

    change(val) {
      this.isPlay = false
      uni.redirectTo({
        url: '/pages/assetlist/list?val=' + JSON.stringify(val)
      })
    },
    // 取消
    changeClose() {
      this.isPlay = false
    },
    // 判断有没权限
    SelectInventory(assetNo) {
      this.$u.api.SelectInventory({ assetNo: assetNo }).then((res) => {
        if (res.data) {
          uni.navigateTo({
            url: "/pages/Inventory/index?assetNo=" + assetNo
          });
        }
      })
    },

    // 消息
    GetMyNewMsg() {
      this.$u.api.GetMyNewMsg().then((res) => {
        this.text1 = res.data.map((x) => x.title)
      })
    }

  },
}
</script>

<style lang="scss" scoped>
.home {
  height: 100vh;
  background: #f3f3f3;

  .nav {
    position: relative;

    .nav_image {
      width: 100%;
      height: 254upx;
    }

    .nav_left {
      position: absolute;
      top: 43upx;
      display: flex;
      align-items: center;
      left: 56upx;

      .image_left {
        .image {
          width: 128upx;
          height: 128upx;
          border-radius: 50%;
          border: solid 10upx #a4d4fc;
        }
      }

      .nav_right {
        margin-left: 48upx;

        .user {
          font-size: 36upx;
          font-weight: normal;
          font-stretch: normal;
          line-height: 48upx;
          letter-spacing: 0px;
          color: #333333;
        }

        .user_item {
          font-size: 26upx;
          font-weight: normal;
          letter-spacing: 0px;
          color: #666666;
          margin-top: 15upx;
        }
      }
    }
  }

  .person {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    padding: 20upx 140upx;

    .personImages {
      display: flex;
      align-items: center;

      image {
        width: 30upx;
        height: 30upx;
        transform: rotate(270deg);
        margin-left: 10upx;
      }
    }

    &>view {
      height: 50upx;
      font-size: 30upx;
      font-weight: normal;
      letter-spacing: 0px;
      color: #666666;
      text-align: center;
    }

    .red {
      height: 50upx;
      border-bottom: 8upx solid #0d6fb8;
      border-radius: 5upx;
      font-size: 30upx;
      font-weight: normal;
      letter-spacing: 0px;
      color: #333333;
      font-weight: bold;
      text-align: center;
    }
  }

  .search {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .search_left {
      width: 85%;
      background: #ffffff;
    }

    .search_right {
      image {
        width: 88upx;
        height: 64upx;
        background-color: #3b8fef;
        border-radius: 10upx;
      }
    }
  }

  .num {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    // padding-bottom: 100px;

    .num_btn {
      width: 48%;
      background: #ffffff;
      margin: 10upx auto;
      text-align: center;
      padding: 41upx 0upx;

      image {
        width: 54upx;
        height: 54upx;
        margin: 0 auto;
      }

      .title {
        font-size: 26upx;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #333333;
        margin-top: 10upx;
      }

      .number {
        font-size: 36upx;
        font-weight: normal;
        letter-spacing: 0px;
        color: #333333;
        margin-top: 10upx;
      }
    }

    .num_btn1 {
      width: 48%;
      background: none !important;
      margin: 10upx auto;
      text-align: center;
      padding: 41upx 0upx;

      image {
        width: 54upx;
        height: 54upx;
        margin: 0 auto;
      }

      .title {
        font-size: 26upx;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #333333;
        margin-top: 10upx;
      }

      .number {
        font-size: 36upx;
        font-weight: normal;
        letter-spacing: 0px;
        color: #333333;
        margin-top: 10upx;
      }
    }
  }

  .progress {
    padding-bottom: 100px;
    background: #ffffff;
    padding-top: 10px;
  }

  .foor {
    height: 93vh;
    overflow-y: auto;
    padding-bottom: 50px;
  }
}
</style>
